import React, {Component} from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import { hashHistory } from 'react-router'
import { login, register } from '../../api/user'
import './login.scss'
export default class Layout extends Component {
    state = {
        isLogin: true
    }
    onFinish = (values) => {
        console.log('values', values)
        const {isLogin} = this.state
        if (isLogin) {
            this.loginFn(values)
        } else {
            this.registerFn(values)
        }
    }
    loginFn = values => {
        const {password, username} = values
        login({
            "userName": username,
            "password": password
        }).then(res => {
            if (res) {
                sessionStorage.setItem('token', res.token)
                sessionStorage.setItem('refreshToken', res.refreshToken)
                hashHistory.push('/')
            }
        })
    }
    registerFn = values => {
        const {password, username} = values
        register({
            "userName": username,
            "password": password
        }).then(res => {
             console.log('res', res)
        })
    }
    register = () => {
       const {isLogin} = this.state
       this.setState({isLogin: !isLogin})
    }
    render() {
        const { isLogin } = this.state
        return (
            <div className={`login`}>
                <div>{isLogin ? `登录` : `注册`}</div>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="">
                            Forgot password
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            {isLogin ? 'login in' : 'register'}
                        </Button>
                    </Form.Item>
                </Form>
                {/*register now!*/}
                Or <a onClick={() => this.register()}>{isLogin ? 'register now!' : 'login'}</a>
            </div>
        )
    }
}
